<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>学院管理·添加学院</title>
    <link rel="stylesheet" type="text/css" href="/static/css/page/add.css">
</head>
<body>
<form action="" method="post" id="popups-window">
    <table>
        <tbody>
        <tr>
            <td>
                <span class="label">名称</span>
            </td>
            <td>
                <label>
                    <input class="input name" name="name" type="text" minlength="1" maxlength="16"
                           autocomplete="off" placeholder="1~16位字符" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">负责人</span>
            </td>
            <td>
                <label>
                    <select class="input departmentHeadId" name="departmentHeadId" required>
                        <option value="">-请选择负责人-</option>
                    </select>
                </label>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="button-box">
        <button class="button confirm" type="submit">确定</button>
        <button class="button cancel" type="submit">取消</button>
    </div>
</form>

<script type="application/javascript">
    $(function () {
        // 获取组件
        let departmentHeadIdEle = $('#popups-window select[name="departmentHeadId"]');
        let nameEle = $('#popups-window input[name="name"]');

        // 程序初始化执行
        loadDepartmentHeadList();

        // 加载专业负责人列表
        function loadDepartmentHeadList() {
            // 获取数据
            $.ajax({
                url: '/api/user/list',
                type: "GET",
                data: {
                    'userRoleId': 2
                },
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        departmentHeadIdEle.html('<option value="">-请选择负责人-</option>');
                        if (res.data)
                            res.data.forEach((item, index) => {
                                departmentHeadIdEle.append($(`<option value="${item.id}">${item.userInfo.name}</option>`));
                            });
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });
        }

        // 监听关闭按钮
        $('#popups-window > .button-box > .button.cancel').click(function (e) {
            e.preventDefault();
            $('#popups-window').hide(300, 'swing', function () {
                window.location.reload();
            });
        });

        // 监听表单提交
        $('#popups-window').submit(function () {
            // 获取数据
            let departmentHeadId = departmentHeadIdEle.val();
            let name = nameEle.val();

            // 数据提交
            $('#popups-window').html(`<h2 style="margin-left: 20px; margin-right: 20px;">数据提交中...</h2>`);
            $.ajax({
                url: '/api/department/add',
                type: "POST",
                data: {
                    'name': name,
                    'departmentHeadId': departmentHeadId,
                },
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        $.message({
                                type: 'success', content: res.msg, onClose: function () {
                                    window.location.reload();
                                }
                            }
                        );
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });

            return false;
        });
    });
</script>
</body>
</html>